<template>
  <div class="app-container">
    <!-- 上方按钮 -->
    <div>
      <!-- 新增课件按钮和新增试卷按钮 -->
      <el-button
        type="primary"
        size="small"
        @click="addCoursewareDialogVisible = true"
        >分配课件</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="addTestPaperDialogVisible = true"
        >分配试卷</el-button
      >
      <!-- 位置在最右边的刷新按钮  -->
      <el-button
        type="primary"
        size="small"
        style="float: right"
        @click="getResourceList()"
      >
        刷新
      </el-button>
    </div>
    <!-- 课件和试卷列表-->
    <el-table :data="resourceList" style="width: 100%">
      <el-table-column type="index" label="索引" width="180"></el-table-column>
      <!-- 如果为1，显示课件，如果为0，显示试卷 -->
      <el-table-column label="类别">
        <template slot-scope="scope">
          <span v-if="scope.row.kind == 1">课件</span>
          <span v-else>试卷</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称"></el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="removeResource(scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分配课件对话框 -->
    <el-dialog
      title="分配课件"
      :visible.sync="addCoursewareDialogVisible"
      width="70%"
    >
      <el-form :inline="true" ref="queryForm">
        <el-form-item label="教材标题" size="small">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入教材标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="工种等级">
          <el-select v-model="queryParams.gradeId" clearable placeholder="全部">
            <el-option
              v-for="item in gradeList"
              :key="item.id"
              :label="item.grade"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" size="small">
          <el-select
            v-model="queryParams.kind"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in kindList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getCoursewareList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="coursewareList"
        height="50vh"
      >
        <el-table-column prop="eduCoursewareInfo.title" label="标题">
        </el-table-column>
        <el-table-column prop="courseName" label="类别"> </el-table-column>
        <el-table-column prop="grade" label="适用职级"> </el-table-column>
        <el-table-column label="简介">
          <template slot-scope="scope">{{
            scope.row.eduCoursewareInfo.coursewareDescription
              ? scope.row.eduCoursewareInfo.coursewareDescription
              : "---"
          }}</template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="gmtCreate"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="
                addResource(scope.row.id, scope.row.eduCoursewareInfo.title, 1)
              "
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCoursewareDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCoursewareDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分配试卷对话框 -->
    <el-dialog
      title="分配试卷"
      :visible.sync="addTestPaperDialogVisible"
      width="70%"
    >
      <!-- 搜索表单 -->
      <el-form :inline="true" ref="queryForm">
        <el-form-item label="试卷标题" size="small">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入试卷标题"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item size="small" label="工种等级">
          <el-select v-model="queryParams.gradeId" clearable placeholder="全部">
            <el-option
              v-for="item in gradeList"
              :key="item.id"
              :label="item.grade"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" size="small">
          <el-select
            v-model="queryParams.kind"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in kindList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item size="small">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getTestPaperList"
            >搜索</el-button
          >
          <!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
        </el-form-item>
      </el-form>
      <!-- 信息列表 -->
      <el-table
        border
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="testPaperList"
        height="50vh"
      >
        <el-table-column prop="eduTestInfo.title" label="标题">
        </el-table-column>
        <el-table-column prop="courseName" label="类别"> </el-table-column>
        <el-table-column prop="grade" label="适用职级"> </el-table-column>
        <el-table-column prop="eduTestInfo.totalScore" label="总分">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="gmtCreate"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="
                addResource(scope.row.eduTestId, scope.row.eduTestInfo.title, 0)
              "
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTestPaperDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTestPaperDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addResource,
  removeResource,
  getResourceList,
} from "@/api/class/classResource";
import { queryCoursewareList } from "@/api/courseware";
import { queryTestPaperList } from "@/api/testPaper";
import { mapGetters } from "vuex";
import { getGradeList } from "@/api/grade";
export default {
  name: "classResource",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data() {
    return {
      // 等级列表
      gradeList: [],
      // 课件列表
      coursewareList: [],
      // 试卷列表
      testPaperList: [],
      // 资源列表
      resourceList: [],
      // 班级id
      classId: this.$route.query.classId,
      // 新增课件弹窗
      addCoursewareDialogVisible: false,
      // 新增试卷弹窗
      addTestPaperDialogVisible: false,
      //搜索表单
      queryParams: {
        title: "",
        gradeId: "",
        kind: "",
      },
      //类型列表
      kindList: [
        { value: "0", label: "新型学徒" },
        {
          value: "1",
          label: "重点用工",
        },
        {
          value: "2",
          label: "技能提升",
        },
      ],
    };
  },
  created() {
    this.getCoursewareList();
    this.getTestPaperList();
    this.getResourceList();
    getGradeList().then((res) => {
      this.gradeList = res.data.resList;
    });
  },
  methods: {
    // 获取课件列表
    getCoursewareList() {
      queryCoursewareList(this.queryParams, 1, 10000, this.companyId).then(
        (res) => {
          this.coursewareList = res.data.reslist;
        }
      );
    },
    // 获取试卷列表
    getTestPaperList() {
      queryTestPaperList(this.queryParams, 1, 10000, this.companyId).then(
        (res) => {
          this.testPaperList = res.data.resList;
        }
      );
    },
    // 获取资源列表
    getResourceList() {
      this.resourceList = [];
      getResourceList(1, this.classId).then((res) => {
        this.resourceList.push(...res.data.resList);
      });
      getResourceList(0, this.classId).then((res) => {
        this.resourceList.push(...res.data.resList);
      });
    },
    // 新增课件/试卷 资源
    addResource(id, title, kind) {
      let eduClassResourceInfo = {
        classId: this.classId,
        resourceId: id,
        kind: kind,
        title: title,
      };
      addResource(eduClassResourceInfo).then((res) => {
        this.$message({
          type: "success",
          message: "新增成功",
        });
        this.getResourceList();
      });
    },
    // 移除资源
    removeResource(row) {
      let ids = [row.id];
      removeResource(ids).then((res) => {
        this.$message({
          type: "success",
          message: "移除资源成功",
        });
        this.getResourceList();
      });
    },
    //重置搜索条件
    resetQuery() {
      this.queryParams = {
        title: "",
        gradeId: "",
        courseId: "",
        kind: "",
      };
      this.getCoursewareList();
      this.getTestPaperList();
    },
  },
};
</script>
